<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery基础教程之遍历-后代</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>后代</h1>
<hr>

<div id="box">
    <ul>
        <li>
            蔬菜
            <ul class="vg">
                <li>西红柿</li>
                <li>土豆</li>
                <li>南瓜</li>
                <li id="mushroom">香菇</li>
            </ul>
        </li>
        <li>
            水果
            <ul class="fruit">
                <li>苹果</li>
                <li>草莓</li>
                <li>葡萄</li>
            </ul>
        </li>
    </ul>
</div>
<script>

    $(function(){
        $(".vg").children().each(function(i,e){
            console.log($(e).text());
        })

        $("div").find("li").each(function(i,e){
            console.log(e);
        })
    })
</script>
</body>
</html>


